<script setup lang="ts">
import useStatusBarHeight from '@/composables/statusBarHeight'
import { useUserInfoStore } from '@/store/userInfo'
import { fetchProjectListAPI } from '@/apis/fetchProjectList'

// Assets
import projEntryIcon from '@/static/images/adminHome/project-entry.png'
import projListForemanIcon from '@/static/images/adminHome/project-list-foreman.png'
import auditManagementIcon from '@/static/images/adminHome/audit-management.png'
import projManagementForemanIcon from '@/static/images/adminHome/project-management-foreman.png'
import afterSalesManagementIcon from '@/static/images/adminHome/after-sales-management.png'
import projManagementManagerIcon from '@/static/images/adminHome/project-management-manager.png'
import contactListIcon from '@/static/images/adminHome/contact-list.png'
import paymentRecordIcon from '@/static/images/adminHome/payment-record.png'

const router = useRouter()
const userInfoStore = useUserInfoStore()
const statusBarHeight = useStatusBarHeight()

const projectListTotal = ref(0)

onShow(() => getProjectListTotal())

const identity = computed(() => {
  const identityList = ['用户', '地区经理', '工长', '财务', '业务员']
  const groupId = userInfoStore.userInfo?.group_id
  if (!groupId)
    return
  if (groupId >= 5)
    return '工人'
  else
    return identityList[groupId]
})

const topPadding = computed(() => statusBarHeight.value + uni.upx2px(88) + uni.upx2px(40))

// 是否显示状态栏背景
const isShowNavBg = ref(false)
// 监听页面滚动，更新状态栏背景可见性
onPageScroll((e) => {
  const toggle = useThrottleFn(() => isShowNavBg.value = e.scrollTop > 16, 100)
  toggle()
})
// 将状态栏背景可见性提供给状态栏组件
provide(isShowNavigationBarBackgroundKey, isShowNavBg)

/* ------------------------------- 事件处理 START ------------------------------- */
/**
 * @description 处理设置个人资料事件
 */
function handleSetProfile() {
  router.push('profileSettings')
}

/**
 * @description 处理退出登录事件
 */
function handleLogout() {
  uni.showModal({
    title: '提示',
    content: '确定要推出登录吗？',
    success: (result) => {
      if (result.confirm) {
        userInfoStore.setUserInfo(null)
        router.replaceAll('index')
      }
    },
    confirmColor: '#FF6D0A',
  })
}

/**
 * @description 处理点击新建项目卡片事件
 */
function handleTapCreateProjectCard() {
  router.push('createProject')
}

/**
 * @description 处理点击项目列表卡片事件
 */
function handleTapProjectListCard() {
  router.push('projectList')
}

/**
 * @description 处理点击售后列表卡片事件
 */
function handleTapAfterSalesCard() {
  router.push('afterSalesList')
}

/**
 * @description 处理点击项目审批卡片事件
 */
function handleTapReviewCard() {
  router.push('review')
}

/**
 * @description 处理点击通讯录卡片事件
 */
function handleTapManagerContactsCard() {
  router.push('managerContacts')
}

/**
 * @description 处理点击财务收款记录卡片事件
 */
function handleTapFinPaymentRecordCard() {
  router.push('paymentRecord')
}

function handleSubscribeGZH() {
  router.push('empower')
}

async function getProjectListTotal() {
  const res = await fetchProjectListAPI({ }, userInfoStore.userInfo!.token!)
  projectListTotal.value = res.data?.data.length || 0
}
/* -------------------------------- 事件处理 END -------------------------------- */
</script>

<template>
  <view class="min-h-screen bg-#F8F8F8">
    <image class="absolute top-0 left-0 w-750rpx h-738rpx" src="@/static/images/adminHome/admin-home-bg.png" />
    <NavigationBar
      title="首页"
      title-placement="center"
      :is-show-background="isShowNavBg"
      :is-show-back-button="false"
      background-color="#FFFFFF"
    />
    <view class="relative z-1 flex flex-col">
      <Spacer :height="topPadding.toString()" unit="px" />
      <view class="flex justify-between items-center px-30rpx" @tap="handleSetProfile">
        <view class="flex items-center">
          <Avatar :picture="userInfoStore.userInfo?.avatar" :size="98" />
          <Spacer width="20" />
          <view class="flex flex-col mt-6rpx">
            <view class="text-32rpx leading-32rpx font-bold text-secondary">
              您好，{{ userInfoStore.userInfo?.nickname ? userInfoStore.userInfo?.nickname : '用户' }}
            </view>
            <Spacer height="11" />
            <view style="display: flex">
              <view class="flex-none text-24rpx leading-24rpx text-white px-10rpx py-5rpx bg-brand rounded-30rpx">
                {{ identity }}
              </view>
            </view>
          </view>
        </view>
        <view v-if="userInfoStore.belongTo(['1', '2', '4'])" class="flex flex-col items-center" @tap.stop="handleSubscribeGZH">
          <image class="w-50rpx h-40rpx" src="@/static/images/wechat_black.png" />
          <Spacer height="8" />
          <view class="text-24rpx leading-24rpx text-secondary">
            公众号
          </view>
        </view>
        <view class="flex flex-col items-center" @tap.stop="handleLogout">
          <image class="w-37rpx h-37rpx" src="@/static/images/adminHome/exit-icon.png" />
          <Spacer height="8" />
          <view class="text-24rpx leading-24rpx text-secondary">
            退出登录
          </view>
        </view>
      </view>
      <Spacer height="62" />
      <view class="flex flex-col px-30rpx">
        <view class="text-30rpx leading-30rpx font-bold text-secondary">
          项目管理
        </view>
        <Spacer height="24" />
        <view v-if="identity === '业务员'">
          <AdminHomeCard title="项目录入" subtitle="点击立即开始录入" :icon="projEntryIcon" @tap="handleTapCreateProjectCard" />
          <AdminHomeCard
            title="项目列表" subtitle="查看审核通过的所有项目" :icon="projListForemanIcon" :badge="projectListTotal ? projectListTotal.toString() : undefined"
            @tap="handleTapProjectListCard"
          />
          <AdminHomeCard
            title="审核管理" subtitle="快速查看项目的审核的结果" :icon="auditManagementIcon"
            @tap="handleTapReviewCard"
          />
        </view>
        <view v-else-if="identity === '工长'">
          <AdminHomeCard
            title="项目管理" subtitle="所有分配下来的项目列表" :icon="projManagementForemanIcon" :badge="projectListTotal ? projectListTotal.toString() : undefined"
            @tap="handleTapProjectListCard"
          />
          <AdminHomeCard
            title="售后管理" subtitle="查看所有的售后项目" :icon="afterSalesManagementIcon"
            @tap="handleTapAfterSalesCard"
          />
        </view>
        <view v-else-if="identity === '地区经理'">
          <AdminHomeCard
            title="项目管理" subtitle="所有经过审核的项目管理" :icon="projManagementManagerIcon"
            @tap="handleTapProjectListCard"
          />
          <AdminHomeCard title="通讯录" subtitle="查看所有的通讯名单" :icon="contactListIcon" @tap="handleTapManagerContactsCard" />
          <AdminHomeCard
            title="审批管理" subtitle="点击快速审批项目" :icon="auditManagementIcon"
            @tap="handleTapReviewCard"
          />
        </view>
        <view v-else-if="identity === '财务'">
          <AdminHomeCard
            title="项目列表" subtitle="所有经过审核的项目查看" :icon="projManagementManagerIcon" :badge="projectListTotal ? projectListTotal.toString() : undefined"
            @tap="handleTapProjectListCard"
          />
          <AdminHomeCard
            title="收款记录" subtitle="查看所有的项目收款情况" :icon="paymentRecordIcon"
            @tap="handleTapFinPaymentRecordCard"
          />
        </view>
        <view v-else-if="identity === '工人'">
          <AdminHomeCard
            title="项目列表" subtitle="所有经过审核的项目查看" :icon="projManagementManagerIcon" :badge="projectListTotal ? projectListTotal.toString() : undefined"
            @tap="handleTapProjectListCard"
          />
        </view>
      </view>
    </view>
  </view>
</template>

<route lang="yaml">
name: 'adminHome'
style:
  navigationStyle: 'custom'
layout: 'custom'
</route>
